<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./js/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="m-layout">
    <!-- 头部 -->
    <div class="m-header">
      <a href="#" class="city">上海 ▼</a>
      <h3>驴妈妈旅游网</h3>
      <a href="#" class="me"></a>
    </div>
    <!-- banner -->
    <div class="m-banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><a href="#"><img src="./images/banner1.jpg"></a></div>
          <div class="swiper-slide"><a href="#"><img src="./images/banner2.jpg"></a></div>
          <div class="swiper-slide"><a href="#"><img src="./images/banner3.jpg"></a></div>
          <div class="swiper-slide"><a href="#"><img src="./images/banner4.jpg"></a></div>
          <div class="swiper-slide"><a href="#"><img src="./images/banner5.jpg"></a></div>
          <div class="swiper-slide"><a href="#"><img src="./images/banner6.jpg"></a></div>
          <div class="swiper-slide"><a href="#"><img src="./images/banner7.jpg"></a></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="m-nav clearfix">
      <img src="./icon/nav1.png" alt="">
      <img src="./icon/nav2.png" alt="">
      <img src="./icon/nav3.png" alt="">
      <img src="./icon/nav4.png" alt="">
      <img src="./icon/nav5.png" alt="">
      <img src="./icon/nav6.png" alt="">
    </div>
    <!-- prod -->
    <div class="m-prod">
      <table>
        <tr>
          <td><img src="./icon/j1.png" alt=""></td>
          <td><img src="./icon/j2.png" alt=""></td>
          <td><img src="./icon/j3.png" alt=""></td>
          <td><img src="./icon/j4.png" alt=""></td>
        </tr>
        <tr>
          <td><img src="./icon/j5.png" alt=""></td>
          <td><img src="./icon/j6.png" alt=""></td>
          <td><img src="./icon/j7.png" alt=""></td>
          <td><img src="./icon/j8.png" alt=""></td>
          </tr>
      </table>
    </div>
    <!-- 亲子 -->
    <div class="m-son clearfix">
      <div class="left">
        <img src="./images/t1.jpg" alt="">
      </div>
      <div class="right">
        <img src="./images/t2.jpg" alt="">
        <img src="./images/t3.jpg" alt="">
      </div>
    </div>

    <div class="m-act">
      <ul>
        <li><p>热门活动</p></li>
        <li><a href="#"><img src="./images/r1.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/r2.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/r3.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/r4.jpg" alt=""></a></li>
      </ul>
    </div>

    <div class="m-ad">
      <ul>
        <li><a href="#">度周末</a><a href="#" class="week">度产假</a></li>
        <li><a href="#"><img src="./images/zm1.jpg"></a>
          <p>[热门活动]驴妈妈温柔季</p>
          <p>听音乐，泡温泉，就找驴妈妈，全新玩法，全心为你，5折整点秒杀，立减100元。</p>
        </li>
        <li><a href="#"><img src="./images/zm2.jpg"></a>
          <p>[热门活动]驴妈妈温柔季</p>
          <p>听音乐，泡温泉，就找驴妈妈，全新玩法，全心为你，5折整点秒杀，立减100元。</p>
        </li>
        <li><a href="#"><img src="./images/zm3.jpg"></a>
          <p>[热门活动]驴妈妈温柔季</p>
          <p>听音乐，泡温泉，就找驴妈妈，全新玩法，全心为你，5折整点秒杀，立减100元。</p>
        </li>
        <li><a href="#"><img src="./images/zm4.jpg"></a>
          <p>[热门活动]驴妈妈温柔季</p>
          <p>听音乐，泡温泉，就找驴妈妈，全新玩法，全心为你，5折整点秒杀，立减100元。</p>
        </li>
        <li><a href="#"><img src="./images/zm5.jpg"></a>
          <p>[热门活动]驴妈妈温柔季</p>
          <p>听音乐，泡温泉，就找驴妈妈，全新玩法，全心为你，5折整点秒杀，立减100元。</p>
        </li>
        <li class="more"><a href="#">查看更多 ﹀</a></li>
        <li class="footer">
          <a href="#">免费注册</a>
          <a href="#">登录</a>
        </li>
      </ul>
    </div>
  </div>
  <script src="./js/swiper/js/swiper.min.js"></script>
  <script src="./js/index.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: 2000,
      pagination : '.swiper-pagination',
    })
  </script>
</body>

</html>